{extend name="common/__base" /}
{block name="body"}
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label for="title" class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="title" name="title" placeholder="请输入角色名">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限选择</label>
        <div class="layui-input-block">
            <div id="tree"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" type="submit" id="submit">添加</button>
        <button class="layui-btn layui-btn-primary" type="reset">重置</button>
    </div>
</form>
{/block}

{block name="js"}
<script>
    let form = layui.form;
    let tree = layui.tree;

    let treeData = {$oneMenuList|raw};

    // 权限节点数据
    tree.render({
        elem: "#tree",
        data: treeData,
        showCheckbox: true,
        id: "tree"
    });

    // 添加角色
    $("#submit").click(function () {
        let checkData = tree.getChecked('tree');
        let newData = [];
        for (let i = 0;i < checkData.length; i++) {
            newData.push(checkData[i].id);
            let children = checkData[i].children;
            for (let j = 0;j < children.length;j++) {
                newData.push(children[j].id);
            }
        }
        $.ajax({
            url: "{:url('admin/admin/addRole')}",
            type: "post",
            data: {title: $("#title").val(), rules: newData},
            dataType: "json",
            success: function (ret) {
                if (ret.code == 1) {
                    layer.msg(ret.msg, {time: 2000}, function () {
                        location.reload();
                    });
                } else {
                    layer.msg(ret.msg);
                }
            }
        });
        return false;
    });
</script>
{/block}